<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="common/base_include::header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div id="exampleToolbar" role="group">
                    <button shiro:hasPermission="sys:role:add" type="button"
                            class="btn btn-primary" onclick="modify('/sys/role/modify','')">
                        <i class="fa fa-plus" aria-hidden="true"></i>添加
                    </button>
                    <button shiro:hasPermission="sys:role:batchRemove" type="button"
                            class="btn btn-danger" onclick="batchRemove('/sys/user/batchRemove','roleId')">
                        <i class="fa fa-trash" aria-hidden="true"></i>删除
                    </button>
                </div>
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>
<div th:include="common/base_include::footer"></div>
<script type="text/javascript">
    var modify_url = "sys/role/modify?roleId=";
    var remove_url = "sys/role/remove";
    $(function () {
        load();
    });

    function load() {
        $('#exampleTable').bootstrapTable({
            method: 'get', // 服务器数据的请求方式 get or post
            url: "/sys/role/list", // 服务器数据的加载地址
            striped: true, // 设置为true会有隔行变色效果
            dataType: "json", // 服务器返回的数据类型
            pagination: true, // 设置为true会在底部显示分页条
            // queryParamsType : "limit",
            // //设置为limit则会发送符合RESTFull格式的参数
            singleSelect: false, // 设置为true将禁止多选
            iconSize: 'outline',
            toolbar: '#exampleToolbar',
            // contentType : "application/x-www-form-urlencoded",
            // //发送到服务器的数据编码类型
            pageSize: 10, // 如果设置了分页，每页数据条数
            pageNumber: 1, // 如果设置了分布，首页页码
            search: true, // 是否显示搜索框
            showColumns: true, // 是否显示内容下拉框（选择显示的列）
            sidePagination: "client", // 设置在哪里进行分页，可选值为"client" 或者
            // "server"
            // queryParams : queryParams,
            // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
            // queryParamsType = 'limit' ,返回参数必须包含
            // limit, offset, search, sort, order 否则, 需要包含:
            // pageSize, pageNumber, searchText, sortName,
            // sortOrder.
            // 返回false将会终止请求
            columns: [
                { // 列配置项
                    // 数据类型，详细参数配置参见文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
                    checkbox: true
                    // 列表中显示复选框
                },
                {
                    field: 'roleId', // 列字段名
                    title: '序号' // 列标题
                },
                {
                    field: 'roleName',
                    title: '角色名'
                },
                {
                    field: 'remark',
                    title: '备注'
                },
                {
                    field: '',
                    title: '权限'
                },
                {
                    title: '操作',
                    field: 'roleId',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var e = '<span shiro:hasPermission="sys:role:edit">' +
                            '<a  class="btn btn-primary btn-sm " href="#" mce_href="#" title="编辑" ' +
                            'onclick="modify(\'' + modify_url + '\',\'' + row.roleId + '\')"><i class="fa fa-edit "></i></a>' +
                            '</span>';
                        var d = '<span shiro:hasPermission="sys:role:remove">' +
                            '<a class="btn btn-warning btn-sm " href="#" title="删除"  mce_href="#" ' +
                            'onclick="remove(\'' + remove_url + '\',\'' + row.roleId + '\')"><i class="fa fa-remove"></i></a>' +
                            ' </span>';
                        return e + d;
                    }
                }]
        });
    }
</script>
</body>
</html>